<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */

;(function(){

<span id='VUI-Component'>/**
</span> * 所有控件的父类
 * @class VUI.Component
 * @extends VUI.Common
 */
VUI.Class('Component',{
	OPTS:{
<span id='VUI-Component-cfg-renderId'>		/**
</span>		 * @cfg {String} renderId 渲染到目标节点的DOM ID
		 */
		renderId:null
<span id='VUI-Component-cfg-autoRender'>		/**
</span>		 * @cfg {Boolean} autoRender 是否自动渲染
		 */
		,autoRender:true
<span id='VUI-Component-cfg-autoHide'>		/**
</span>		 * @cfg {Boolean} autoHide 是否一开始隐藏
		 */
		,autoHide:false
<span id='VUI-Component-cfg-position'>		/**
</span>		 * @cfg {String} position 控件DIV层的position样式
		 */
		,position:'static'
<span id='VUI-Component-cfg-zindex'>		/**
</span>		 * @cfg {Number} zindex zindex
		 */
		,zindex:0
	}
<span id='global-method-constructor'>	/**
</span>	 * 构造函数
	 * @constructor
	 * @ignore
	 */
	,init:function(opts) {
		this._super(opts);
		
		this.id =  VUI.getId();
		this.controllerName = this.getClassName() + &quot;_Controller_&quot; + this.id;
		this.children = [];
		
		this.initParent();
		this.initChildren();
		
		this.view = this._buildViewInstance();
		
		if(this.opts.autoRender) {
			this.onRender();
			this.render();
		}
	}
<span id='VUI-Component-method-initParent'>	/**
</span>	 * @private
	 */
	,initParent:function() {
		var parent = this.opt('parent');
		if(parent) {
			parent.addChild(this);
		}
	}
<span id='VUI-Component-method-initChildren'>	/**
</span>	 * @private
	 */
	,initChildren:function() {
		var children = this.opt('children');
		if(children) {
			children = $.isArray[children] ? children : [children];
			for(var i=0, len=children.length;i&lt;len; i++) {
				this.addChild(children[i]);
			}
		}
	}
	,addChild:function(cmp) {
		this.children.push(cmp);
	}
<span id='VUI-Component-method-boot'>	/**
</span>	 * 自定义加载
	 * @private
	 */
	,boot:function() {
		if(!this.booted) {
			// 1. 先加载子控件
			var children = this.children;
			for(var i=0, len=children.length;i&lt;len; i++) {
				children[i].boot();
			}
			// 2. 再加载自身
			var appName = this.getAppName()
			
			this.vueData = this.getVueData();
			
			this.controller(this.vueData);
			
			this._vue = new Vue({
				el: '#' + appName,
			  	data:this.vueData
			});
			
			this.booted = true;
			
			this.setNextDo(function(){
				this.afterBoot();
			});
		}
	}
<span id='VUI-Component-method-setNextDo'>	/**
</span>	 * 下一次执行动作&lt;br&gt;
	 * 如表格数据加载完毕后,勾选某一行:&lt;pre&gt;
	 * grid.setNextDo(function(){
	 *    this.checkRow(1);
	 * });
	 * &lt;/pre&gt;
	 * 由于vue的数据绑定是异步的,我们并不知道数据何时绑定完毕&lt;br&gt;
	 * 如果需要在绑定结束后执行某些操作,可以调用这个方法
	 */
	,setNextDo:function(callback) {
		var that = this;
		if(this._vue) {
			this._vue.$nextTick(function () {
				callback.call(that);
			});
		}
	}
<span id='VUI-Component-method-afterBoot'>	/**
</span>	 * vue对象创建完成后执行的操作
	 */
	,afterBoot:function() {
	}
<span id='VUI-Component-property-vueData'>	/**
</span>	 * @prperty vueData vue的data
	 */
	,vueData:null
<span id='VUI-Component-method-getVueData'>	/**
</span>	 * 返回vue的data
	 */
	,getVueData:function() {
		return {
			cmp:this
		};
	}
	,controller:function(data) {
		
	}
<span id='VUI-Component-method-getViewClass'>	/**
</span>	 * 抽象方法
	 * @abstract
	 */
	,getViewClass:function() {
		alert('类' + this.getClassName() + '必须重写Component.getViewClass()');
	}
<span id='VUI-Component-method-getView'>	/**
</span>	 * @private
	 */
	,getView:function(){
		return this.view;
	}
<span id='VUI-Component-method-onRender'>	/**
</span>	 * 组件渲染到页面之前触发的事件
	 */
	,onRender:function() {
		
	}
<span id='VUI-Component-method-render'>	/**
</span>	 * 组件渲染到页面,如果有dom参数,则渲染到dom中,否则渲染到renderId中
	 * @param {Dom} dom DOM对象
	 */
	,render:function(dom) {
		// 1. 先确保有html
		this.view.render(dom); 
		// 2. 初始化vue
		this.boot();
	}
<span id='VUI-Component-method-getControllerName'>	/**
</span>	 * @private
	 */
	,getControllerName:function() {
		return this.controllerName;
	}
<span id='VUI-Component-method-getShowName'>	/**
</span>	 * @private
	 */
	,getShowName:function() {
		return this.showName;
	}
<span id='VUI-Component-method-show'>	/**
</span>	 * 显示控件
	 */
	,show:function() {
		this.view.show();
	}
<span id='VUI-Component-method-hide'>	/**
</span>	 * 隐藏控件
	 */
	,hide:function() {
		this.view.hide();
	}
<span id='VUI-Component-method-getApp'>	/**
</span>	 * @private
	 */
	,getApp:function() {
		return this.app;
	}
<span id='VUI-Component-method-getAppName'>	/**
</span>	 * @private
	 */
	,getAppName:function() {
		return this.getClassName() + &quot;App&quot; + this.id;
	}
	
	,_buildViewInstance:function() {
		var View = this.getViewClass();
		return new View(this)
	}
},VUI.Common);

})();</pre>
</body>
</html>
